<template>
  <!-- class的多种操作 -->

  <!-- 类 -->
  <h1 :class="{ active: isActive, bgColor: showBgColor }">hello1-class</h1>
  <button @click="toggle">切换</button>

  <!-- 数组 -->
  <h1 :class="classArr">hello2-array</h1>

  <!-- 数组＋类 -->
  <h1 :class="[className, { active: isActive }]">hello2-array</h1>

  <!-- style的多种操作 -->
  <h1 :style="sty">hello</h1>
  <h1 :style="{ width: '300px', height: '100px', backgroundColor: 'blue' }">
    hello
  </h1>
  <h1 :style="styObj">hello</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true,
      showBgColor: true,
      classArr: ["swipe", "active"],
      className: "swipe",
      sty: "background:yellow",
      styObj: {
        width: "200px",
        height: "100px",
        backgroundColor: "green",
      },
    };
  },
  methods: {
    toggle() {
      this.showBgColor = !this.showBgColor;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
.active {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}
.bgColor {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
.swipe {
  font-size: 26px;
  color: #fff;
}
</style>
